<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>observer</title>
</head>
<body>
  
</body>

<script>
  function defineReactive(data, key, val) {
    observer(val); // 递归遍历所有子属性
    Object.defineProperty(data, key, {
      get: function() {
        return val // get一定要return
      },
      set: function(newValue) {
        val = newValue;
        console.log("要改的属性", key, "已经被监听的值", newValue)
      }
    })
  }


  function observer(data) {
    // 必须是一个对象
    if(!data || typeof data !== "object") {
      return 
    }
    // Object.keys 遍历数组和对象 key 值， 并排序, 返回数组
    // forEach 数组遍历，依次输出每个数组值
    Object.keys(data).forEach(function(key){
      // forEach在这里遍历每个对象 key是比较的属性
      defineReactive(data, key, data[key])
    })
  }

  var library = {
    book1: {
        name: ''
    },
    book2: ''
  };

  observer(library);
  library.book1.name = 'vue权威指南'; // 属性name已经被监听了，现在值为：“vue权威指南”
  library.book2 = '没有此书籍';  // 属性book2已经被监听了，现在值为：“没有此书籍”
</script>
</html>



